<template>
  <div class="pop-over">
    <div class="bg" v-if="isShow" @click="isShow = false"></div>
    <el-popover placement="bottom" :visible="isShow" :width="375" :hide-after="0" :offset="8" trigger="click">
      <template #reference>
        <div class="reference">
          <el-button @click="isShow = true">
            条件查询<i class="iconfont icon-tiaojianshaixuan"></i>
          </el-button>
        </div>
      </template>
      <div class="content">
        <div class="item" v-if="regionConditon.province.show">
          <el-tag size="large">所在省</el-tag>
          <el-cascader
            v-model="regionConditon.province.v"
            :options="regionConditon.province.p"
            placeholder="选择省"
            @change="regionChange"
          />
        </div>
        <div class="item" v-if="regionConditon.city.show">
          <el-tag type="success" size="large">所在市</el-tag>
          <el-cascader
            v-model="regionConditon.city.v"
            :options="regionConditon.city.p"
            placeholder="选择市"
            @change="regionChange"
          />
        </div>
        <div class="item" v-if="regionConditon.district.show">
          <el-tag type="warning" size="large">所在区</el-tag>
          <el-cascader
            v-model="regionConditon.district.v"
            :options="regionConditon.district.p"
            placeholder="选择区"
            @change="regionChange"
          />
        </div>
        <div v-for="item in keyConditon" :key="item.id">
          <div class="item" v-if="item.show">
            <el-tag size="large" :type="item.c">{{item.t}}</el-tag>
            <el-input v-model="item.v" :placeholder="item.p" clearable style="width: 216px;"/>
          </div>
        </div>  
        <div class="item" v-if="clientType.show">
          <el-tag size="large" :type="clientType.c">{{clientType.t}}</el-tag>
          <el-select v-model="clientType.v" :placeholder="clientType.p">
            <el-option
              v-for="item in clientType.options"
              :key="item.k"
              :label="item.k"
              :value="item.v"
            />
          </el-select>
        </div>
        <div class="item" v-if="statusData.show">
          <el-tag size="large" :type="statusData.c">{{statusData.t}}</el-tag>
          <el-select v-model="statusData.v" :placeholder="statusData.p">
            <el-option
              v-for="item in statusData.options"
              :key="item.v"
              :label="item.t"
              :value="item.v"
            />
          </el-select>
        </div>
        <div class="item" v-if="dateCondition.show">
          <el-date-picker
            v-model="dateCondition.v"
            type="daterange"
            range-separator="到"
            start-placeholder="创建日期起始"
            end-placeholder="创建日期结束"
          />
        </div>
        <div class="btn">
          <el-button plain style="width: 120px;" @click="searchClear">清 空</el-button>
          <el-button type="primary" style="width: 120px;" @click="searchDone">搜 索</el-button>
          <!-- {{data}} -->
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { regionData, codeToText } from "element-china-area-data";
import util from '@/assets/js/util';
export default {
  props: ['data'],
  setup(props,ctx) {
    const Global = getCurrentInstance().proxy
    let user = reactive({
      id: Global.$var.user.id,
      username: Global.$var.user.username,
      power: Global.$var.user.power,
    });

    onMounted(()=>{
      getProvince()
      // if ('client_list'.indexOf(d)>=0) {
      //   statusData.c = 'success'
      // }
    })

    let isShow = ref(false)
    let d = props.data.id
  //console.log(d)
    // 省市区条件
    let regionConditon = reactive({
      province: {
        v: '',
        p: [],
        show: hasStr('client_list,apps_store',d)
      },
      city: {
        v: '',
        p: [],
        data: [],
        show: hasStr('client_list,apps_store',d)
      },
      district: {
        v: '',
        p: [],
        show: false
      },
    })
    function getProvince() {
      regionConditon.province.p = regionData.map(item => {
        return { value: item.value, label: item.label };
      })
    }
    function regionChange(e) {
      if (e[0].length == 2) {
        const cityItem = regionData.filter(item => {
          return item.value == e
        })
        regionConditon.city.data = cityItem[0].children
        regionConditon.city.p = cityItem[0].children.map(item => {
          return { value: item.value, label: item.label };
        })
      }
      if (e[0].length == 4) {
        const districtItem = regionConditon.city.data.filter(item => {
          return item.value == e
        })
        regionConditon.district.p = districtItem[0].children.map(item => {
          return { value: item.value, label: item.label };
        })
      }
    }
    // 关键字条件
    let keyConditon = ref([
      {id: 1, t: '项目单编号', c: 'info', v: '', show: d.indexOf('device_')>=0 && user.power > 90},
      {id: 2, t: '用户名称', c: 'primary', v: '', show: hasStr('client_list,apps_store',d)},
      {id: 3, t: '所属用户', c: 'primary', v: '', show: hasStr('base_operator',d) || d.indexOf('device_')>=0},
      {id: 4, t: '主板厂商', c: 'primary', v: '', show: hasStr('base_factory,base_board,base_rom,base_devtype',d)},
      {id: 5, t: '姓名', c: 'success', v: '', show: hasStr('base_operator',d)},
      {id: 6, t: '联系人', c: 'success', v: '', show: hasStr('base_factory,client_list,apps_store',d)},
      {id: 7, t: '电话', c: 'warning', v: '', show: hasStr('base_factory,client_list,base_operator,apps_store',d)},
      {id: 8, t: '主板型号', c: 'success', v: '', show: hasStr('base_board,base_rom,base_devtype',d)},
      {id: 9, t: '固件名称', c: 'primary', v: '', show: hasStr('base_rom',d)},
      {id: 10, t: '固件版本名称', c: 'warning', v: '', show: hasStr('base_rom',d)},
      {id: 11, t: '固件版本号', c: 'danger', v: '', show: hasStr('base_rom',d)},
      {id: 12, t: '设备型号', c: 'warning', v: '', show: hasStr('base_devtype',d) || d.indexOf('device_')>=0},
      {id: 13, t: '设备序列号', c: 'success', v: '', show: d.indexOf('device_')>=0},
      {id: 14, t: '主板序列号', c: 'danger', v: '', show: d.indexOf('device_')>=0},
      {id: 15, t: '应用名称', c: 'primary', v: '', show: hasStr('apps_list',d)},
      {id: 16, t: '版本号', c: 'success', v: '', show: hasStr('apps_list',d)},
      {id: 17, t: '应用包名', c: 'warning', v: '', show: hasStr('apps_list',d)},
    ])
    keyConditon.value.forEach(v=>{
      if (hasStr('设备序列号,主板序列号',v.t)) {
        v.p = `请输入${v.t}`
      } else {
        v.p = `请输入${v.t}关键字`
      }
    })
    // 选择框条件（用户类型）
    let clientType = reactive({
      t: '用户类型',
      c: 'danger',
      v: '',
      p: '请选择用户类型',
      show: hasStr('client_list',d),
      options: [
        {k: util.cilentType('11112222'), v: 8},
        {k: util.cilentType('111122223333'), v: 12},
      ]
    })
    // 状态选择框
    let statusData = reactive({
      t: '状态',
      c: 'info',
      v: '',
      p: '请选择状态',
      show: hasStr('base_operator,client_list,apps_list',d),
      options: Global.$const.STATUS_DATA
    })
    // 日期条件
    let dateCondition = reactive({
      v: '',
      show: d.indexOf('device_')>=0
    })

    function searchDone() {
      let e = []
      if (regionConditon.province.v) e.push({t:'province',v:codeToText[regionConditon.province.v]})
      if (regionConditon.city.v) e.push({t:'city',v:codeToText[regionConditon.city.v]})
      if (regionConditon.district.v) e.push({t:'district',v:codeToText[regionConditon.district.v]})
      if (dateCondition.v[0]) e.push({t:'dtStart',v:util.formatDate(new Date(dateCondition.v[0]),'-')})
      if (dateCondition.v[1]) e.push({t:'dtEnd',v:util.formatDate(new Date(dateCondition.v[1]),'-')})
      if (clientType.v) e.push({t:clientType.t,v:clientType.v})
      if (typeof(statusData.v)=='number') e.push({t:statusData.t,v:statusData.v})
      keyConditon.value.forEach(v=>{
        if (v.v) e.push({t:v.t,v:v.v})
      })
      ctx.emit('search',e)
      isShow.value = false
    }

    function searchClear() {
      for(let i in keyConditon.value) {
        keyConditon.value[i].v = ''  
      }
      clientType.v = ''
      statusData.v = ''
      dateCondition.v = ''
      regionConditon.province.v = ''
      regionConditon.city.v = ''
      regionConditon.district.v = ''
    }

    function close() {
      isShow.value = false
    }

    function isNull(v) {
      return util.isNull(v)
    }

    function hasStr(S,k) {
      return util.hasStr(S,k)
    }

    return{
      user, isShow, regionConditon, regionChange,
      keyConditon, clientType, statusData, dateCondition,
      searchDone, searchClear, close, isNull, hasStr
    }
  }
};
</script>

<style lang="scss" scoped>
.pop-over{
  display: inline-block;
  .bg{
    width: 100%;height: calc(100vh);
    position: fixed;
    top: 0;left: 0;
    background-color: rgba(0,0,0,0);
    z-index: 999;
  }
}
.reference{
  display: inline-block;
  padding: 0 10px;
  .el-button{
    width: 240px;height: 35px;
    .iconfont{
      margin: 0 5px;
    }
  }
}
.content{
  .item{
    @extend %view-flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
    .el-input{
      margin-left: 10px;
    }
    // .el-select{
    //   margin-left: 10px;
    //   width: 100%;
    // }
  }
  .btn{
    @extend %view-flex;
    flex-direction: row;
    padding-top: 10px;
  }
}
</style>